<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Bootstrap 101 Template</title>

		<!-- Bootstrap  #b8602a -->
		<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
		<style>
			.content{
				border: 1px solid gray;
			}
			.div1 {
				background-color: #cae0b9;
				height: 50px;
			}

			.head-desc {
				background-color: #b8602a;
				height: 50px;
			}

			.head-desc .term {
				color: white;
				line-height: 50px;
				font-size: 25px;
				text-align: center;
			}

			.term-no {
				text-align: center;
			}

			.term-circle {
				display: inline-block;
				margin-right: 8px;
			}

			.term-circle .out-circle {
				border-radius: 50%;
				height: 50px;
				width: 50px;
				display: inline-block;
				background: #cae0b9;
				vertical-align: top;
			}

			.term-circle .num-circle {
				display: block;
				color: #262626;
				height: 50px;
				font-size: 25px;
				line-height: 50px;
				text-align: center
			}
			.term-main .desc{
				height: 700px;
				background: #cae0b9;
			}
			.term-main .desc .text1{
				text-align: center;
				font-size: 20px;
				height: 50px;
				line-height: 50px;
				border-bottom: 1px solid white;
			}
			.term-main .desc .div_qian_san{
				text-align: center;
				font-size: 20px;
				margin: 0 auto;
			}
			.div_qian_san_txt{
				position: absolute;
				top:50%; 
				width: 60%;
				background: #FFFD01;
			}
			
		</style>
	</head>
	<body>

		<div class="content">
			<div class="myheader">
				<div class="div1">
				</div>
				<div class="container-fluid">
					<div class="row head-desc">
						<div class="col-md-2 term"><span>第20190308008期</span></div>
						<div class="col-md-8 term-no">
							<div class="term-circle">
								<span class="out-circle">
									<span class="num-circle">
										08
										</span>
								</span>
							</div>
							<div class="term-circle">
								<span class="out-circle">
									<span class="num-circle">
										08
										</span>
								</span>
							</div>
							<div class="term-circle">
								<span class="out-circle">
									<span class="num-circle">
										08</span>
								</span>
							</div>
							<div class="term-circle">
								<span class="out-circle">
									<span class="num-circle">
										08</span>
								</span>
							</div>
							<div class="term-circle">
								<span class="out-circle">
									<span class="num-circle">
										08</span>
								</span>
							</div>
							<div class="term-circle">
								<span class="out-circle">
									<span class="num-circle">
										08</span>
								</span>
							</div>
							<div class="term-circle">
								<span class="out-circle">
									<span class="num-circle">
										08</span>
								</span>
							</div>
							<div class="term-circle">
								<span class="out-circle">
									<span class="num-circle">
										08</span>
								</span>
							</div>
							<div class="term-circle">
								<span class="out-circle">
									<span class="num-circle">
										08</span>
								</span>
							</div>
							<div class="term-circle">
								<span class="out-circle">
									<span class="num-circle">
										08</span>
								</span>
							</div>
						</div>
						<div class="col-md-2 term"><span>18:02:59</span></div>
					</div>
				</div>
			</div>

			<!-- 主数据区域 -->
			<div class="container-fluid term-main">
				<div class="row">
					<div class="col-md-2 desc main_left">
						<div class="text1">
							<span>玩法</span>
						</div>
						
						<div class="div_qian_san">
							 <div class="div_qian_san_txt">
								 <span>前三</span>
							 </div>
						</div>
						
					</div>
					<div class="col-md-8">.col-md-4</div>
					<div class="col-md-2 desc main_right">
									
					</div>
				</div>
			</div>

		</div>

		<script src="lib/jquery/jquery.min.js"></script>
		<script src="lib/bootstrap/js/bootstrap.min.js"></script>
	</body>
</html>
